<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="one" style="height: 400px; width: 600px"></div>
    <div id="two" style="height: 400px; width: 600px"></div>
    <div id="three" style="height: 400px; width: 600px"></div>
    <div id="four" style="height: 400px; width: 600px"></div>

    <script src="./echarts.min.js"></script>
    <script>
      // 薪资走势
      !(function () {
        var myChart = echarts.init(document.getElementById('one'))
        const option = {
          title: { text: '2021全学科薪资走势' },
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
              lineStyle: { type: 'dashed', color: '#d1d1d1' },
            },
          },
          yAxis: {
            type: 'value',
            splitLine: { lineStyle: { type: 'dashed' } },
          },
          tooltip: {
            show: true,
          },
          legend: {
            lineStyle: { type: 'dashed' },
          },

          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true,
              symbolSize: 9,
              lineStyle: {
                color: '#579fff',
                width: 7,
              },
              emphasis: {
                disabled: true,
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#91c5fe', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#fff', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
        }
        myChart.setOption(option)
      })()

      // 薪资分布
      !(function () {
        var myChart = echarts.init(document.getElementById('two'))
        const option = {
          tooltip: {
            trigger: 'item',
          },
          legend: {
            bottom: '5%',
            left: 'center',
          },
          title: {
            text: '班级薪资分布',
            top: '2%',
            left: '2%',
          },
          series: [
            {
              name: '班级薪资分布',
              type: 'pie',
              radius: ['47%', '60%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 15,
                borderColor: '#fff',
                borderWidth: 2,
              },
              color: [
                '#34d39a',
                '#3fceff',
                '#5097ff',
                '#fda224',
                '#73c0de',
                '#3ba272',
                '#fc8452',
                '#9a60b4',
                '#ea7ccc',
              ],
              label: {
                show: false,
                position: 'center',
              },
              tooltip: { show: true },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: '1万以下' },
                { value: 735, name: '1~1.5万' },
                { value: 580, name: '1.5~2万' },
                { value: 484, name: '2万以上' },
              ],
            },
          ],
        }
        myChart.setOption(option)
      })()

      // 班级每组薪资
      !(function () {
        var myChart = echarts.init(document.getElementById('three'))
        const option = {
          title: { text: '班级每组薪资', top: '2%', left: '2%' },
          xAxis: {
            type: 'category',
            data: ['刀哥', '虎哥', '小亮', '你来', '沈阳', '大街', '等你'],
            axisLine: { lineStyle: { type: 'dashed', color: '#d3d3d3' } },
          },
          yAxis: {
            type: 'value',
            splitLine: { lineStyle: { type: 'dashed' } },
          },
          tooltip: { show: true },
          color: [
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#36d39b', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#d4f5ea', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#4da0ee', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#d5e8fa', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          ],
          series: [
            {
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
            },
            {
              data: [150, 100, 160, 90, 99, 150, 60],
              type: 'bar',
            },
          ],
        }
        myChart.setOption(option)
      })()

      // 男女薪资分布
      !(function () {
        var myChart = echarts.init(document.getElementById('four'))
        const option = {
          title: [
            {
              text: '男女薪资分布',
              left: '2%',
              top: '2%',
            },
            {
              text: '男生',
              left: '50%',
              top: '47%',
              textAlign: 'center',
            },
            {
              text: '女生',
              left: '50%',
              top: '90%',
              textAlign: 'center',
            },
          ],
          color: [
            '#69cf9e',
            '#ffb54b',
            '#68a7ff',
            '#74e0ff',
            '#73c0de',
            '#3ba272',
            '#fc8452',
            '#9a60b4',
            '#ea7ccc',
          ],
          tooltip: {
            trigger: 'item',
          },

          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['20%', '30%'],
              center: ['50%', '26%'],
              data: [
                { value: 1048, name: '1万以下' },
                { value: 735, name: '1~1.5万' },
                { value: 580, name: '1.5~2万' },
                { value: 484, name: '2万以上' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
            {
              name: 'Access From',
              type: 'pie',
              radius: ['20%', '30%'],
              center: ['50%', '70%'],
              data: [
                { value: 1048, name: '1万以下' },
                { value: 735, name: '1~1.5万' },
                { value: 580, name: '1.5~2万' },
                { value: 484, name: '2万以上' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        }
        myChart.setOption(option)
      })()
    </script>
  </body>
</html>
